<template>
    <div class="desc-popup-container popup-container" catchtouchmove="move">
        <div class="contain-box text-center">
            <div class="inner-box">
                <div class="rules">
                    <div v-for="(item, index) in content" :key="index">
                        <div class="rule color-red">{{item.q}}</div>
                        <div v-for="(str, y) in item.a" :key="index + '_' + y" class="rule">{{str}}</div>
                    </div>
                </div>
            </div>
            <span class="icon" @click="closePopup">&#xe80b;</span>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'DescPop'
})
export default class DescPop extends Vue {
    public content = [
        {
            q: '解锁问答一：',
            a: [
                '问：哪些商品可以购多少返多少？',
                '答：凡具有“返还购“标识的商品及商家，都参与了平台“购多少返多少”的平台活动。',
            ],
        },
        {
            q: '解锁问答二：',
            a: [
                '问：我购买的钱平台是如何给我返的：',
                '答：如您在平台商家A消费1000元，您在平台上将获得此商家1000元的解锁金额，未解锁之前，此金额不能提现返还，您推荐亲朋好友在此商家购买商品，如这款商品的推荐返还金额为100元，你推荐购买成功后将获得100元解锁金额，等平台工作人员审核通过后即可申请提现此100元。您可以继续推荐亲朋好友购买此商家的商品，获得更多解锁金额，并申请提现，直到您消费的1000元解锁并返还完为止。',
            ],
        },
        {
            q: '解锁问答三：',
            a: [
                '问：如果商品的返还金额比我的解锁金额多最终是返多少？',
                '答：如您最后的解锁金额还有50元，但你推荐亲朋好友购买的商品能获得100元返还金额。因为您的解锁金额只有50元，所以只能返还您最后的50元。所以最后的解锁金额只能是以您最后所剩余的解锁金额为准。',
            ],
        },
        {
            q: '解锁问答四：',
            a: [
                '问：我在A商家有消费有解锁金额，但如果推荐购买B商家的商品，能不能获得返还金额？',
                '答：您的解锁返还金额，只属于A商家，推荐B商家的商品是不能获得返还金额的，因为您在B商家没有消费也没有解锁金额。如果想获得B商家的解锁返还金额，必须先得在B商家消费。',
            ],
        },
        {
            q: '解锁问答五：',
            a: [
                '问：我如何才能获得推荐返还金额？',
                '答：您推荐朋友购买时，直接发送商品给朋友，在推荐人那里将出现您的名字直接关联。如果不是直接分享推荐的，可以让您的朋友在推荐人一栏输入您的电话或姓名查找进行关联。',
                '如果没有关联，在平台上将不能获得您的推荐信息。平台不负任何连带责任。',
            ],
        },
    ];

    /** 隐藏使用规则 */
    public closePopup() {
        this.$emit('close');
    }
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.desc-popup-container {
    .contain-box {
        position: absolute;
        width: 80%;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        .inner-box {
            top: 10px;
            width: 100%;
            height: 400px;
            padding: 60rpx;
            color: #333;
            background: @white-color;
            box-sizing: border-box;
            border-radius: 60rpx;
            overflow-y: auto;

            .title {
                margin: 0 auto 40rpx;
                width: 400rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 10rpx;
                font-size: 40rpx;
                color: #333;
                background: #fff;
            }
            .rules {
                font-size: 28rpx;
                text-align: left;
                counter-reset: rules start;
                .rule {
                    margin: 10rpx 0;
                }
            }
        }
        .icon {
            position: relative;
            top: 60rpx;
            color: @white-color;
            font-size: 60rpx;
        }
    }
}
</style>
